<template>
  <div>
    <!-- 上传excel组件 -->
    <upload-excel :on-success="handleSuccess" :before-upload="beforeUpload" />
  </div>
</template>

<script>
// 导入接口
import { batchAddEmp } from '@/api/employees'
// 导入转换时间工具
import { parseTime } from '@/utils'
export default {
  methods: {
    // 上传前调用的钩子，如果return true才会往下继续读取这个excel的内容
    // 如果return false代表你校验不通过，不往下执行
    // 所以在这个钩子里可以做一些对文件的判断，例如判断是否为xls和xlsx文件格式
    beforeUpload (file) {
      // 判断file.name是不是以 .xls 或者 .xlsx结尾
      // 如果是这两个结尾代表文件是excel可以往下继续执行
      if (/\.(xls|xlsx)$/.test(file.name)) {
        return true
      }

      // 能来到这，证明不是excel
      this.$message.warning('请选择excel文件')
      // return false代表文件校验不通过，不往下执行
      return false
    },

    // results 就是读取到的这个excel的内容
    // header 就是读取到的这个excel的表头
    // 其实这里只有一个参数，只不过参数是一个对象，然后用解构语法取出了里面的属性
    // 其中的一个属性叫results，就是读取到的excel的内容
    async handleSuccess ({ results }) {
      // 如果读取成功，就把excel里的内容上传到服务器做批量添加
      //   console.log('success', results)
      // 是带来通过user进来的（员工页面过来）
      if (this.$route.query.type === 'user') {
        // 我们需要自己用代码把表格中的中文属性改成英文属性
        // 下面这个对象是一个中英文对照对象，可以根据中文属性得到对应的英文属性
        const userRelations = {
          入职日期: 'timeOfEntry',
          手机号: 'mobile',
          姓名: 'username',
          转正日期: 'correctionTime',
          工号: 'workNumber',
          聘用形式: 'formOfEmployment'
        }
        // 下面这个代码例子就是展示了通过中文属性可以取到它对应的英文值
        //   console.log( userRelations['入职日期'] )  // timeOfEntry

        // 我们要对results做处理-->产生一个长度一样的数组，只不过里面的属性名都变成英文的
        // 产生一个长度一样的数组，而且对每一项要做处理，应该用
        const list = results.map(v => {
          // return一个新的对象，新对象里的中文都转变成英文属性了
          // 准备一个新的对象
          const obj = {}
          // 因为要每个属性都转换，就意味着要遍历这个对象
          for (const key in v) {
            /*
             v[key] 就是每个属性值
             key 是每个中文属性名
             enKey 是根据中文属性名取出的对应英文属性名
             obj是新对象
          */
            // 根据中文key取出对应的英文key
            const enKey = userRelations[key]
            if (key === '入职日期' || key === '转正日期') {
              // 就要做转换后再加到新对象里
              const timestamp = (v[key] - 1) * 1000 * 60 * 60 * 24
              // 得到时间戳后先变成一个日期对象
              const date = new Date(timestamp)
              // 先获取年
              const year = date.getFullYear()
              // 再设置年份为自己年份少70年
              date.setFullYear(year - 70)
              // 还得把日期对象转成年-月-日格式的字符串-以前可以用dayjs
              // 但是这个项目作者就提供了一个转换的方法
              obj[enKey] = parseTime(date, '{y}-{m}-{d}')
            } else {
              // 此时新对象用的就是英文的key来保存的属性值
              obj[enKey] = v[key]
            }
          }
          return obj
        })
        // 传递转换为英文数组的数据
        const res = await batchAddEmp(list)
        // 弹出提示
        this.$message.success('批量导入员工成功')
        // 回退到员工页面
        this.$router.push('/employees')
      }
      // 以后如果有别的页面就写else的导入即可
    }
  }
}
</script>

<style></style>
